 <!DOCTYPE html>
 <html>  
   <head>  
     <title>Dive into html5</title>  
     <script type="text/javascript">  
       function draw(){  
         var canvas = document.getElementById('tutorial');  
         if (canvas.getContext){   // check for canvas support
           var ctx = canvas.getContext('2d');  // get the context for later drawing
		   var ctx1 = canvas.getContext('2d');  
		   
		   ctx.fillStyle = "rgb(200,0,0)";  
		   ctx.strokeRect (10, 10, 55, 50); 	   		

		   ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 		   
		   ctx.fillRect (30, 30, 55, 50);
         }  
       }  
     </script>  
     <style type="text/css">  
       canvas { border: 1px solid black; }  
     </style>  
   </head>  
   <body onload="draw();">  
     <canvas id="tutorial" width="150" height="150"></canvas>  
   </body>  
 </html>  

